<template>
	<view class="recruit">
		<!-- 搜索拦        -->
		<view class="search">
			<view class="searchInput">
				<text class="info" >{{work.workname}}</text>
				<text class="money">{{work.payment}}</text>
			</view>
			<view class="position">
				<image src="/static/locate.png"></image>
				<text>{{work.location}}</text>
			</view>
			<view class="update">
				<text>发布于{{work.publishtime}}</text>
			</view>
		</view>
		<!-- 搜索栏end -->
		
		<!-- middle -->
		<view class="middle">
			<view class="click">
				<text>职位描述</text>
			</view>
		</view>
		<!-- middle_end -->
		
		<view style="height: 10px; background-color: #f4f8f9;">
		</view>
		
		<view class="box">
			<view class="content">
					<view class="partOne">
						<view class="body">
							<view class="body1">以前干过</view>
							<view class="body2">有些经验</view>
							<view class="body3">很熟练</view>
							<view class="body4">随叫随到</view>
							
						</view>
						<view class="partOne_middle">
							
						</view>
						
					</view>
		
			</view>
		</view>
		
		<view class="middle">
			<view class="click">
				<text>前往</text>
			</view>
		</view>
		
		<view class="middle_map">
			<view class="map" >
					<view class="page-body">
						<view class="page-section page-section-gap">
							<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
							</map>
						</view>
					</view>
					<button @click="guideline()">导航 </button>
			</view>
		</view>
		
		<view  class="text">
			<image src="/static/dunpai.png"></image>
			<h1>工作安全提醒</h1>
			<text style="font-size: 14px; font-weight: 200;" >用人单位若存在以下违法行为，请您提高警惕，立刻报警或者向平台举报；</text>
			<p style="font-size: 14px; font-weight: 200;" >1.强迫或者要求您投资入股、购买虚拟货币(如比特币)、转账、汇款等</p>
			<p style="font-size: 14px; font-weight: 200;">2.要求您提供担保人、担保金或者以其他名义向您收取财务。</p>
		</view>
		
		<view><text></text></view>
		
		<view class="option">
			<view class="suboption">
				<view class="share">
					
						<button class="share_btn" @click="share()" open-type="share">
							<text>分享</text>
							<image src="/static/fenxiang.png"></image>
						</button>
					
				</view>
				
				<view class="select">
					<button @click="dialogToggle('info')"  class="btn">立即投递</button>
					 
				</view>
				
				<!-- 提示窗示例 -->
							<uni-popup ref="alertDialog" type="dialog">
								<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="确定要接受这份工作" @confirm="dialogConfirm"
									@close="dialogClose"></uni-popup-dialog>
							</uni-popup>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				work:'',
				id:0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: '',
				longitude: '',
				covers: [{
					latitude: '',
					longitude: '',
					iconPath: '../../../static/定位.png'
				}],
				type: 'center',
				msgType: 'success',
				messageText: '确定要接受这份工作吗？',
				value: '',
				employeeid: ''
				
			}
		},
		onLoad(option) {
			
			this.GetWorkDescription(option.id)

		},
		onShow(){
			this.employeeid = getApp().globalData.globeUser.userid
		},
		methods: {
			
			GetWorkDescription(id){
				
				uni.request({
					url:getApp().globalData.baseUrl+"/workListDescription/"+id,
					method:'GET',
					success: (res) => {
						console.log(res.data)
						this.work = res.data.success
						this.latitude = res.data.success.latitude
						this.longitude = res.data.success.longitude
						this.covers.latitude = res.data.success.latitude
						this.covers.longitude = res.data.success.longitude
						
					}
				})
				
				
			},
			
			dialogToggle(type) {
							this.msgType = type
							this.$refs.alertDialog.open()
						},
			
			guideline(){
				
				console.log(1)
				this.mapFun(this.latitude,this.longitude,this.work.location);
			
			},
			
			messageToggle(type) {
				this.msgType = type
				this.messageText = `这是一条${type}消息提示`
				this.$refs.message.open()
			},
			
			returnPage(){
				uni.navigateBack()
			},
			
			dialogConfirm() {
				
			
			
			 
			
				
				uni.request({
					url:getApp().globalData.baseUrl+"/Employment",
					method:'POST',
					data:{
						employerid:this.work.userid,
						employeeid:this.employeeid,
						workid:this.work.id
					},
					success: (res) => {
						console.log(res)
						uni.showToast({
						 	title:"接受成功",
							icon:'success',
							duration:800
						 })
						 
						 
						setTimeout(() => {
							uni.navigateBack();
						},1000)
						
					
					}
				})
				
						
			},
			
			
			//打开第三方地图
			mapFun(latitude,longitude,location){
				console.log(2)
				const lati = Number(latitude)
				const logi = Number(longitude)
				uni.openLocation({
					latitude: lati,//纬度
					longitude: logi,//经度
					name: location,
					address: location,
					success: (res) => {
						console.log(3)
					}
			});
		},
		
		
		share(){
			uni.share({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 1,
				summary: "就业一站通上的好工作",
				success: function (res) {
					console.log("success:" + JSON.stringify(res));
				},
				fail: function (err) {
					console.log("fail:" + JSON.stringify(err));
				}
			});
		}
				


		}
	}
</script>

<style>
	.recruit {
		background-color: #fbfbfd;
		display: block;
	}

	.search {
		top: 20px;
		align-items: center;
		justify-content: center;
		height: 200px;
		width: 100%;
		position: relative;
	}
	
	.search .position{
		position: absolute;
		top: 80px;
		left: 10px;
		font-weight: 400;
	}
	
	.search .position image{
		height: 25px;
		width: 25px;
		position: absolute;
		top: 0px;
	}
	
	.search .position text{
		position: absolute;
		left: 30px;
		width: 100px;
	}
	
	.search .update{
		position: absolute;
		top: 115px;
		left: 10px;
		font-weight: 200;
	}

	.searchInput {
		left: 10px;
		width: 80%;
		display: block;
		position: absolute;
		font-size: 20px;
	}

	.box{
		background-color: #f4f8f9;
		width: 100%;
	}
	
	.content{
		background-color: #ffffff;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 8px;
	}
	
	.content .partOne{
		height: 200px;
	}
	
	.middle{
		height: 40px;
		width: 100%;
		position: relative;
		margin-bottom: 10px;
		margin-left: 10px;
		background-color: #fbfbfd;
	}
	
	.middle .click{
		top: 8px;
		position: absolute;
		left: 10px;
		font-weight: 800;
		font-size: 20px;
		border-bottom: 2px solid #008c8c;
	}
	
	.content .partOne{
		height: 200px;
		position: relative;
		width: 100%;
		margin-bottom: 10px;
	}
	
	.content .partOne .container{
		position: absolute;
		height: 20px;
		left: 10px;
		top: 10px;
		width: 100%;
	}
	
	.content .partOne .work{
		position: absolute;
		font-weight: bold;
		left: 0px;
		color: #212121;
	}
	.search .searchInput .money {
		position: absolute;
		font-weight: bold;
		right: 0px;
		top: 0px;
		color: #839cef;
	}
	
	.content .partOne .body{
		position: absolute;
		height: 20px;
		width: 80%;
		top: 20px;
	}
	
	.content .partOne .body .body1{
		position: absolute;
		left: 10px;
		background-color: #f4f6f8;
		font-size: 15px;
		font-weight: 330;
	}
	.content .partOne .body .body2{
		position: absolute;
		left: 80px;
		background-color: #f4f6f8;
		font-size: 15px;
		font-weight: 330;
	}
	.content .partOne .body .body3{
		position: absolute;
		left: 150px;
		background-color: #f4f6f8;
		font-size: 15px;
		font-weight: 330;
	}
	.content .partOne .body .body4{
		position: absolute;
		left: 220px;
		background-color: #f4f6f8;
		font-size: 15px;
		font-weight: 330;
	}
	
	.partOne_middle{
		height: 80px;
	}
	
	.middle_map{
		margin-left: 10px;
		margin-right: 10px;
		background-color: #ffffff;
		margin-bottom: 60px;
	}
	
	.middle_map .map{
		border-radius: 25%;
	}
	
	.middle_map button{
		top: 10px;
		background-color: #577cf6;
		color: #d1dbfb;
	}
	
	.option{
		height: 100px;
		width: 100%;
		background-color: #ffffff;
		position: fixed;
		bottom: 0px;
	}
	
	.text{
		height: 300px; 
		margin-bottom: 150px; 
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.text image{
		height: 30px;
		width: 30px;
	}
	
	.option .share{
		position: absolute;
		font-weight: 350;
		left: 50px;
		top: 3px;
		width: 60px;
	}
	

	
	.option .share text{
		position: absolute;
		top: 40px;
		width: 40px;
	}
	
	.option .select{
		width: 200px;
		position: absolute;
		top: 5px;
		right: 20px;
	}
	
	.option .suboption{
		position: relative;
	}
	
	.option .btn{
		color: #d1dbfb;
		width: 200px;
		border-radius: 20; 
		background-color: #577cf6; 
		margin: 8px;
	}
	
	.share_btn{
		height: 80px;
		width: 100px; 
		position: absolute;
		background-color: #ffffff; 
		border: 0 none
	}
	
	.share_btn::after{
		border: none;
	}
	
	.share_btn text{
		position: absolute;
		width: 8px;
		height: 8px;
		font-size: 13px;
		left: 8px;
	}
	
	.option .share image{
		width: 25px;
		height: 25px;
		position: absolute;
		top: 12px;
		left: 16px;
	}
	
	
	
</style>
